<template>
  <div class="example">
    <yx-container layout="center" padding="20px">
      <!-- 主题切换内部颜色设置-->
      <span class="example-title">主题切换内部颜色设置</span>
      <p class="example-primary-color" style="margin-top: 20px">主题色</p>
      <div class="example-margin-top"></div>

      <!-- 头部导航--子系统的 -->
      <section>
        <span class="example-title">头部导航--子系统</span>
        <div class="layout__yx-header example-margin-top">
          <yx-header
            class="layout-special-header"
            title="福建省市场监管"
            sub-title="智慧应用一体化平台"
            :logo="require('@/assets/logo.png')"
            @nav-button="navButton"
            @right-content-button="rightContentButton"
            ref="header"
            :navigationButton="navigationButton"
            :right-content="rightContent"
            @mouseover="mouseover"
            @mouseleave="mouseleave"
          >
            <template #center-before>
              <div class="yx-common-yx-header__border"></div>
              <span class="yx-common-yx-header__center-before"
                >统一登记受理系统</span
              >
            </template>
          </yx-header>
          <HeaderTips :visible="theme.visible" title="主题设置" right="100">
            <section
              class="layout__item"
              @click="theme.color = 'default-theme'"
              :class="[
                theme.color === 'default-theme' && 'layout__item-is-active',
              ]"
            >
              <div class="layout__round layout__theme--default"></div>
              <span>默认</span>
            </section>
            <section
              class="layout__item"
              @click="theme.color = 'orange-theme'"
              :class="[
                theme.color === 'orange-theme' && 'layout__item-is-active',
              ]"
            >
              <div class="layout__round layout__theme--orange"></div>
              <span>日暮</span>
            </section>
            <section
              class="layout__item"
              @click="theme.color = 'red-theme'"
              :class="[theme.color === 'red-theme' && 'layout__item-is-active']"
            >
              <div class="layout__round layout__theme--red"></div>
              <span>火山</span>
            </section>
            <section
              class="layout__item"
              @click="theme.color = 'cyan-theme'"
              :class="[
                theme.color === 'cyan-theme' && 'layout__item-is-active',
              ]"
            >
              <div class="layout__round layout__theme--cyan"></div>
              <span>明青</span>
            </section>
            <section
              class="layout__item"
              @click="theme.color = 'green-theme'"
              :class="[
                theme.color === 'green-theme' && 'layout__item-is-active',
              ]"
            >
              <div class="layout__round layout__theme--green"></div>
              <span>极光绿</span>
            </section>
            <section
              class="layout__item"
              @click="theme.color = 'purple-theme'"
              :class="[
                theme.color === 'purple-theme' && 'layout__item-is-active',
              ]"
            >
              <div class="layout__round layout__theme--purple"></div>
              <span>酱紫</span>
            </section>
          </HeaderTips>
          <HeaderTips :visible="zoom.visible" title="字体设置">
            <section
              class="layout__item--center"
              @click="zoom.font = '100'"
              :class="[zoom.font === '100' && 'layout__item-is-active']"
            >
              <span>小</span>
            </section>
            <section
              class="layout__item--center"
              @click="zoom.font = '110'"
              :class="[zoom.font === '110' && 'layout__item-is-active']"
            >
              <span>中</span>
            </section>
            <section
              class="layout__item--center"
              @click="zoom.font = '120'"
              :class="[zoom.font === '120' && 'layout__item-is-active']"
            >
              <span>大</span>
            </section>
            <section
              class="layout__item--center"
              @click="zoom.font = '125'"
              :class="[zoom.font === '125' && 'layout__item-is-active']"
            >
              <span>超大</span>
            </section>
          </HeaderTips>
        </div>
        <div style="margin-bottom: 38px"></div>
      </section>

      <!-- 菜单--子系统的 -->
      <section style="height: 450px">
        <span class="example-title">菜单</span>
        <yx-menu
          class="example-margin-top example-menu"
          :data="menuData"
          ref="menu"
          :default-openeds="openeds"
        >
          <div>
            <section class="yx-common-yx-menu__flex">
              <div class="yx-common-yx-menu__left-button">注册</div>
              <div
                class="
                  yx-common-yx-menu__right-button
                  yx-common-yx-menu__right-button--line-feed
                "
              >
                <span class="yx-common-yx-menu__active">首页</span>
                <span>个体</span>
                <span>内资</span>
                <span>农专</span>
                <span>名称</span>
                <span>综合</span>
              </div>
            </section>
            <section class="yx-common-yx-menu__flex">
              <div class="yx-common-yx-menu__left-button">许可</div>
              <div class="yx-common-yx-menu__right-button">
                <span>食品</span>
                <span>食生</span>
                <span>食盐</span>
                <span>计量</span>
                <span>特种</span>
              </div>
            </section>
          </div>
        </yx-menu>
        <div style="margin-bottom: 38px"></div>
      </section>

      <!-- 边框、卡片 -->
      <section>
        <span class="example-title">边框</span>
        <div class="yx-common-border example-border">常规边框</div>
        <div class="yx-common-border--base-shadow example-border">
          基础投影
        </div>
        <div class="yx-common-border--lighter-shadow example-border">
          浅色投影
        </div>
        <div style="margin-bottom: 38px"></div>
      </section>

      <section>
        <span class="example-title">卡片</span>
        <el-card class="box-card example-margin-top">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button class="yx-common-card__button" type="text"
              >操作按钮</el-button
            >
          </div>
          1111
        </el-card>
      </section>

      <!--消息框 -->

      <section>
        <span class="example-title example-margin-top">消息框</span>
        <div style="margin-top: 10px">
          <el-button size="small" @click="open">打开消息框</el-button>
        </div>
      </section>

      <!--对话框 -->
      <section>
        <span class="example-title example-margin-top">对话框</span>
        <div style="margin-top: 10px">
          <el-button size="small" @click="visible = true">打开对话框</el-button>
        </div>
      </section>

      <!--min-width 自己决定大小 当前属性只是范例 -->
      <section>
        <yx-dialog :visible.sync="visible" :min-width="1100">
          <yx-rich-text
            v-model="activeName"
            ref="yx-rich-text"
          ></yx-rich-text>
        </yx-dialog>
      </section>

      <!--标签页 -->

      <!-- 基础用法 -->
      <section>
        <span class="example-title example-margin-top">标签页--常规</span>
        <el-tabs v-model="activeName" class="example-margin-top">
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </section>

      <!-- 选项卡样式 -->

      <section>
        <span class="example-title example-margin-top"
          >标签页--选项卡样式1</span
        >
        <el-tabs v-model="activeName" type="card" class="example-margin-top">
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </section>

      <section>
        <span class="example-title example-margin-top"
          >标签页--选项卡样式2</span
        >
        <div class="yx-common-tabs--division">
          <el-tabs v-model="activeName" type="card" class="example-margin-top">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          </el-tabs>
        </div>
      </section>

      <!-- 按钮样式 -->
      <section>
        <span class="example-title example-margin-top">标签页--按钮</span>
        <div class="yx-common-tabs--button">
          <el-tabs v-model="activeName" type="card" class="example-margin-top">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="按钮管理" name="thir">按钮管理</el-tab-pane>
          </el-tabs>
        </div>
      </section>

      <!-- 纵向-->
      <section>
        <span class="example-title example-margin-top">标签页--纵向</span>
        <el-tabs
          v-model="activeName"
          tab-position="left"
          class="example-margin-top"
        >
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </section>
      <!--步骤条 -->

      <section>
        <span class="example-title example-margin-top">步骤条</span>
        <!--细线步骤条 -->
        <div class="example-flex">
          <div style="width: 60%">
            <el-steps :active="active" align-center style="margin-top: 38px">
              <el-step title="步骤 1"></el-step>
              <el-step title="步骤 2"></el-step>
              <el-step title="步骤 3"></el-step>
            </el-steps>
          </div>
        </div>

        <!--进度条 -->
        <div class="example-flex">
          <div style="width: 60%">
            <el-steps :active="active" simple style="margin-top: 20px">
              <el-step title="步骤 1"></el-step>
              <el-step title="步骤 2"></el-step>
              <el-step title="步骤 3"></el-step>
            </el-steps>
          </div>
        </div>

        <div class="example-flex">
          <el-button style="margin-top: 12px" @click="next" size="mini"
            >下一步</el-button
          >
        </div>
      </section>
      <!--表格分页-->

      <section>
        <span class="example-title example-margin-top">表格分页</span>
        <span class="example-margin-top">表格分页--常规表格</span>
        <yx-table-pagination
          class="example-margin-top"
          ref="table"
          header-cell-class-name="yx-common-table-pagination__header"
          @btn-operate="btnOperate"
          :delete-message-box="deleteMessageBox"
          @current-change="currentChanges"
          @size-change="sizeChange"
          :page-size="table.pageSize"
          :total="table.total"
          :columns="columns"
          :data="table.data"
          :currentPage.sync="table.currentPage"
          :button="button"
          is-show-selection
          :height='400'
        >
          <!--当前400只是范例 不是标准值 请根据需求来改变-->
        </yx-table-pagination>

        <span class="example-margin-top">表格分页--自适应固定操作列表格</span>
        <yx-table-pagination
          class="example-margin-top"
          header-cell-class-name="yx-common-table-pagination__header"
          @btn-operate="btnOperate"
          :delete-message-box="deleteMessageBox"
          @current-change="currentChange"
          :page-size="pageSize"
          :columns="columns2"
          :data="tableData"
          :button="button"
        ></yx-table-pagination>
      </section>

      <!--树-->
      <section>
        <span class="example-title example-margin-top">树</span>
        <yx-tree
          :data="treeData"
          class="example-margin-top"
          width="20%"
          @node-click="nodeClick"
        ></yx-tree>
      </section>

      <!--时间线(时间轴)-->
      <section>
        <span class="example-title example-margin-top">时间线(时间轴)</span>
        <div style="height: 250px; width: 300px" class="example-margin-top">
          <el-steps direction="vertical" :active="active">
            <el-step
              title="步骤 1"
              description="这是一段很长很长很长的描述性
              "
            ></el-step>
            <el-step title="步骤 2">
              <template #description>
                <p>这是一段很长很长很长的描述性文字</p>
              </template>
            </el-step>
            <el-step
              title="步骤 3"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
          </el-steps>
        </div>
        <el-button style="margin-top: 12px" @click="next" size="mini"
          >下一步</el-button
        >
      </section>
      <!--时间线(时间轴)-->
      <section>
        <span class="example-title example-margin-top">带信息面板时间轴</span>
        <div
          style="height: 300px; width: 300px"
          class="example-margin-top yx-common-step-card"
        >
          <el-steps direction="vertical" :active="active">
            <el-step
              title="步骤 1"
              description="这是一段很长很长很长的描述性
              "
            ></el-step>
            <el-step title="步骤 2">
              <template #description>
                <p>这是一段很长很长很长的描述性文字</p>
                <p>这是一段很长很长很长的描述性文字</p>
              </template>
            </el-step>
            <el-step
              title="步骤 3"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
          </el-steps>
        </div>
        <el-button style="margin-top: 12px" @click="next" size="mini"
          >下一步</el-button
        >
      </section>
      <div style="margin-bottom: 48px"></div>
    </yx-container>

    <!-- 放在yx-container容器外 -->
    <div class="yx-common-footer-button">
      <!-- 组件外部要嵌套个div -->
      <div>
        <el-button>取消</el-button>
        <el-button type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import menu from '@/router/menu.js'
// import test from '@/api/test'
import HeaderTips from '@/layout/HeaderTips'
export default {
  name: 'example',
  components: {
    HeaderTips
  },
  data () {
    return {
      /* 头部导航 */
      // header中间按钮数据
      navigationButton: [{
        path: 'dialog', // 唯一key值
        type: 'item', // 最底层的菜单-没有子菜单的
        text: '业务办理'// 菜单名
      },
      {
        path: 'dialog1',
        type: 'item',
        text: '统计分析'
      },
      {
        path: 'dialog2',
        type: 'item',
        text: '其他业务'
      }],

      rightContent: [
        {
          type: 'icon',
          value: require('@/assets/image/header/theme.svg')
        },
        {
          type: 'icon',
          value: require('@/assets/image/header/zoom.svg')
        },

        {
          value: '李四',
          icon: require('@/assets/image/header/head_sculpture.svg'),
          dialog: true, // 设置这个属性后,点击这个按钮会弹出对话框,默认是false
          mouse: true
        }
      ],

      theme: {
        visible: false,
        color: 'default-theme'//

      },
      zoom: {
        visible: false,
        font: '100%'//
      },

      /* 左侧菜单 */
      openeds: ['一级目录', 'demo'],
      // 菜单、面包屑数据
      menuData: [],

      /* 左侧菜单-end */

      // 删除的对话框
      deleteMessageBox: {
        content: '代码是写给人看的，顺便在程序里运行',
        text: '删除'
      },
      active: 0, // 步骤条的位置
      visible: false, // 是否显示对话框
      activeName: 'second', // 卡片选项卡高亮
      pageSize: 20, // 分页的页码
      // 时间线
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      // 树的数据
      treeData: [
        {
          id: 1,
          label: '一级 1',
          disabled: true, // 设置某个节点不能被选择
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1',
            children: [{
              id: 6,
              label: '三级 2-1-1'
            }]
          }, {
            id: 3,
            label: '二级 2-2',

            children: [{
              id: 7,
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          id: 8,
          children: [{
            id: 10,
            label: '二级 3-1',
            children: [{
              id: 11,
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            id: 12,
            children: [{
              id: 13,
              label: '三级 3-2-1'
            }]
          }]
        }
      ],
      /* ----表格----- */
      // 表头
      columns: [
        {
          label: '抽查计划',
          prop: 'planName',
          type: 'tree'
        },
        {
          label: 'Name',
          prop: 'name'
        },
        {
          label: 'Age',
          prop: 'age',
          sortable: 'custom', // 接受一个Boolean，默认为false,如果需要后端排序，需将sortable设置为custom
          filters: [{ text: 18, value: 18 }, { text: 19, value: 19 }, { text: 20, value: 20 }]
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        }
      ],

      // 表格
      tableData: [
        {
          id: 1,
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03',
          children: [{
            id: 31,
            name: 'John Brown',
            age: 200,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03',
            children: [{
              id: 313333,
              name: 'John Brown',
              age: 200,
              address: 'New York No. 1 Lake Park',
              date: '2016-10-03',
              children: [{
                id: 3133333333,
                name: 'John Brown',
                age: 200,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
              }, {
                id: 2003344333,
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
              }]
            }, {
              id: 2003344,
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park',
              date: '2016-10-03'
            }]
          }, {
            id: 200,
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          }]

        },
        {
          id: 2,
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'

        },
        {
          id: 3,
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          id: 4,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 5,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 6,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04',
          children: [{
            id: 3133,
            name: 'John Brown',
            age: 200,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          }, {
            id: 20033,
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          }]
        },
        {
          id: 7,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 8,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],

      // 表格数据2
      columns2: [
        {
          label: 'Name',
          prop: 'name',
          type: 'tree'
        },
        {
          label: 'Name',
          prop: 'name'
        },

        {
          label: 'Age',
          prop: 'age',
          width: 100,
          sortable: 'custom', // 接受一个Boolean，默认为false,如果需要后端排序，需将sortable设置为custom
          filters: [{ text: 18, value: 18 }, { text: 19, value: 19 }, { text: 20, value: 20 }]
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: '操作',
          type: 'operate',
          width: 285,
          fixed: 'right'
        }
      ],

      // 表格按钮
      button: [
        {
          value: '新增',
          type: 'text'
        },
        {
          value: '查看',
          type: 'text'
        },

        {
          value: '修改',
          type: 'text'
        },
        {
          value: '删除',

          type: 'text'
        }
      ],

      table: {
        loading: false,
        // 表头
        columns: [
          {
            label: '抽查计划名称',
            prop: 'planName'
          },
          {
            label: '抽查检查范围',
            prop: 'checkScope'
          }

        ],
        // 表格
        data: [
          {
            id: 1,
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03',
            children: [{
              id: 31,
              name: 'John Brown',
              age: 200,
              address: 'New York No. 1 Lake Park',
              date: '2016-10-03',
              children: [{
                id: 313333,
                name: 'John Brown',
                age: 200,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03',
                children: [{
                  id: 3133333333,
                  name: 'John Brown',
                  age: 200,
                  address: 'New York No. 1 Lake Park',
                  date: '2016-10-03'
                }, {
                  id: 2003344333,
                  name: 'John Brown',
                  age: 18,
                  address: 'New York No. 1 Lake Park',
                  date: '2016-10-03'
                }]
              }, {
                id: 2003344,
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
              }]
            }, {
              id: 200,
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park',
              date: '2016-10-03'
            }]

          },
          {
            id: 2,
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'

          },
          {
            id: 3,
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            id: 4,
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            id: 5,
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            id: 6,
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04',
            children: [{
              id: 3133,
              name: 'John Brown',
              age: 200,
              address: 'New York No. 1 Lake Park',
              date: '2016-10-03'
            }, {
              id: 20033,
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park',
              date: '2016-10-03'
            }]
          },
          {
            id: 7,
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            id: 8,
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ],
        // 表格按钮
        button: [
          {
            value: '修改',
            type: 'text'
          },
          {
            value: '复用',
            type: 'text'
          },
          {
            value: '删除',
            type: 'text'
          }
        ],
        // 分页的页码
        pageSize: 20,
        currentPage: 1,
        total: 0
      }
    }
  },

  mounted () {
    this.menuData = JSON.parse(JSON.stringify(menu))
  },
  methods: {
    // 树点击事件
    nodeClick (data, node, ele) {
      console.log('nodeClick')
    },
    // 表格上的按钮的点击事件
    btnOperate (emit) {
      const { value, data: { id } = {} } = emit || {}
      const keyMap = {
        删除: () => {
          this.del(id)
        }
      }
      keyMap[value] && keyMap[value]()
    },

    // 分页切换
    currentChange (emit) {
      console.log(emit)
    },

    // 步骤条 下一步
    next () {
      if (this.active++ > 2) this.active = 0
    },

    // 打开消息框
    open () {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          })
        }
      })
    },

    /* 头部导航 */
    rightContentButton (emit) {
      console.log(emit)
    },

    navButton (emit) {
      console.log(emit, 11)
    },

    mouseover ({ index }) {
      const keyMap = {
        0: () => {
          this.theme.visible = true
        },
        1: () => {
          this.zoom.visible = true
        }
      }
      keyMap[index] && keyMap[index]()
    },
    mouseleave ({ index }) {
      const keyMap = {
        0: () => {
          this.theme.visible = false
        },
        1: () => {
          this.zoom.visible = false
        }
      }
      keyMap[index] && keyMap[index]()
    },

    // 分页切换
    currentChanges (emit) {
      this.table.currentPage = emit
    },

    // 分页页码切换
    sizeChange (emit) {
      this.table.pageSize = emit
    }

  }
}
</script>

<style lang='scss'  scoped>
/*以下只是范例上的样式*/

.example-primary-color {
  @include themes-text-color;
}

.example-border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 150px;
  margin-top: 10px;
  font-size: $--font-size-content;
}

.example-margin-top {
  margin-top: 20px;
  display: block;
}

.example-title {
  font-size: $--font-size-title;
  font-weight: bold;
}

.example-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.example-menu {
  height: calc(61vh - 65px) !important;
  width: 264px;
}

.example-menu {
  background: linear-gradient(
    $--yx-header-background,
    $--yx-menu-background-gradient
  ) !important;
}

.layout-special-header {
  background: map-get($default-theme, yx-header-background) !important;
}
</style>
